<template>
  <div class="visitBox">
    <div class="vBox">
      <div
        class="v-cons"
        v-for="item in interview"
        :key="item.id"
        @click="Morelist(item.id)"
      >
        <div class="leftPic">
          <img :src="`https://ss.lanqb.com/${item.imgCover}`" alt="" />
        </div>
        <div class="rightText">
          <h3 class="r-tit">{{ item.title }}</h3>
          <div class="r-info">
            <img :src="`https://ss.lanqb.com/${item.profile.avatar}`" alt="" />
            <p class="nickname">{{ item.profile.nickname }}</p>
          </div>
          <div class="icons">
            <div class="hitsNum">
              <i class="iconfont icon-chakan"></i>
              <p class="i-num">
                {{ item.flow_num_base + item.statistics.hits_num }}
              </p>
            </div>
            <div class="hitsNum">
              <i class="iconfont icon-pinglun"></i>
              <p class="i-num">
                {{ item.statistics.comment_num }}
              </p>
            </div>
            <div class="hitsNum">
              <i class="iconfont icon-dianzan1"></i>
              <p class="i-num">
                {{ item.statistics.like_num }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { getCurrentInstance, ref } from "vue";
const { $axios, $request } =
  getCurrentInstance().appContext.config.globalProperties;

let interview = ref();

// 本页面所有列表 详情页跳转
const router = useRouter();
let Morelist = (list) => {
  router.push({
    name: "LiveInfo",
    query: { id: list },
  });
};

// 大触专访 https://m.lanqb.com/api/daniu/interview?link=paging&type=interview&page=1

$request(
  `/lanqb/api/daniu/interview?link=paging&type=interview&page=1`,
  "get"
).then(({ data }) => {
  // console.log(data);
  interview.value = data;
  // console.log(interview.value);
});
</script>

<style lang="less">
.visitBox {
  height: calc(100vh - 40px - 44px - 45px - 50px);
  overflow-y: scroll;
  background-color: #eee;
  padding: 0 15px;
  &::-webkit-scrollbar {
    display: none;
  }
  .vBox {
    .v-cons {
      width: 345px;
      height: 105px;
      background-color: #ffffff;
      border-radius: 5px;
      box-sizing: border-box;
      display: flex;
      margin-top: 10px;
      .leftPic {
        img {
          width: 140px;
          height: 100%;
          border-radius: 5px 0 0 5px;
        }
      }
      .rightText {
        padding: 10px;
        .r-tit {
          font-size: 13px;
          color: #333333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .r-info {
          display: flex;
          align-items: center;
          padding: 8px 0;
          img {
            width: 22px;
            height: 22px;
            border-radius: 50%;
          }
          .nickname {
            margin-left: 10px;
            font-size: 12px;
            color: #434343;
          }
        }
        .icons {
          display: flex;
          .hitsNum {
            display: flex;
            margin-right: 20px;
            i {
              font-size: 13px;
            }
            .i-num {
              margin-left: 5px;
              font-size: 13px;
              color: #9f9f9f;
            }
          }
        }
      }
    }
  }
}
</style>
